<template>
    <div>
        <div class="search">
            <div class="search-content">
                <div class="search-input">
                    <icon type='search' size='16'/>
                    <input @input="handleInput" v-model='keyword' placeholder="请输入关键字" />
                </div>
                <button @click="cancelHandle" class="cancel" v-if='keyword'>取消</button>
                <div class="search-modal" v-if="keyword">
                    <div :key='item.goods_id' v-for='item in resultList' class="search-item">{{item.goods_name}}</div>
                </div>
            </div>
        </div>
        <div class="history"></div>
        <div class="history-list"></div>
    </div>
</template>
<script>
import request from '../../utils/request.js'
  export default {
    data () {
      return {
        keyword: '',
        resultList: []
      }
    },
    methods: {
        cancelHandle() {
            this.keyword= ''
        },
        async handleInput() {
            let res = await request('goods/qsearch',{query:this.keyword})
            this.resultList= res.data.message
        }
    }
  }
</script>
<style scoped lang="scss">
  @import './main.scss';
</style>